<template>
  <view class="container">
    <Paglist
      v-model="dataList"
      :is-init-api="true"
      :parame="parame"
      @register="register"
      :scroll-top-bottom="260"
      :is-show-loadmore="dataList.length >= 1"
    >
      <template v-for="v in dataList" :key="v.id">
        <view class="list-item">
          <CrossClubRecordsItem :data="v"></CrossClubRecordsItem>
        </view>
      </template>
    </Paglist>
  </view>
</template>

<script lang="ts" setup>
  /* crossClubRecords 跨会记录 */
  import { provide, ref, watch, type PropType } from 'vue';

  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import type { ICrossClubRecords, ICrossClubRecordsQuery } from '@/api/businessOpportunities/type';
  import { boPromotionReviewList } from '@/api/businessOpportunities';
  import CrossClubRecordsItem from '../../crossClubRecords/components/CrossClubRecordsItem.vue';

  const props = defineProps({
    parame: {
      type: Object as PropType<ICrossClubRecordsQuery>,
      default: () => ({}),
    },
  });

  provide('api', async (obj: ICrossClubRecordsQuery) => {
    const res = await boPromotionReviewList(obj);
    return res;
  });
  const dataList = ref<ICrossClubRecords[]>([]);

  const [register, { refresh }] = useConList();

  watch(
    () => props.parame,
    () => {
      refresh();
    },
    { deep: true },
  );

  defineExpose({
    refresh,
  });
</script>

<style lang="scss" scoped>
  .container {
    .tabs-box {
      position: sticky;
      background-color: #ffffff;
      z-index: 999;
    }
    .list-item {
      padding: 0 30rpx;
      margin-bottom: 30rpx;
      &:nth-child(1) {
        padding-top: 30rpx;
      }
    }
  }
</style>
